<template>
  <div class="bdmap">
    <van-nav-bar
      title="地图找房"
      left-arrow
      @click-left="tiao"
    />
     <baidu-map class="bm-view"
     :center="center" :zoom="zoom"
     >
     <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
     <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
     <div v-for='item in list'
     :key='item.value'>
      <bm-label :content="item.label + '<br>' + item.count" :position="{lng: item.coord.longitude, lat: item.coord.latitude}" :labelStyle="{
        border: '1px #fff solid',
        color: '#fff',
        fontSize: '14px',
        textAlign: 'center',
        background: '#fff',
        width: '66.9px',
        height: '51.9px',
        borderRadius: '50%',
        background: '#1cb676',
        lineHeight: '20px',
        padding: '15px 0 0 0'}" @click='change(item.value)'/>
     </div>
  </baidu-map>
  </div>
</template>

<script>
import { cityInfo, mapHouse } from '@/api/user'
export default {
  data () {
    return {
      center: '上海',
      zoom: 12,
      id: '',
      list: [],
      content: '',
      count: ''
    }
  },
  async created () {
    const { body } = await cityInfo(this.center)
    // console.log(body.value)
    this.id = body.value
    const res = await mapHouse(this.id)
    console.log(res)
    this.list = res.body
  },
  methods: {
    async change (id) {
      const res = await mapHouse(id)
      console.log(res)
      this.list = res.body
      this.zoom = 15
    },
    tiao () {
      this.$router.back()
    }
  }
}
</script>

<style>
.bm-view {
  width: 100%;
  height: 620px;
}
</style>
